<!-- 系统信息 -->
<template>
  <div id="SystemMessage">
    <!-- 头部 -->
    <Head BackType2="true" title="系统信息" BackType2Num="603"></Head>
    <!-- 主体 -->
    <div id="Main">
      <span class="timeTag">2019-04-15 09:33</span>
      <div class="messageBox">
        <h5>老番薯2333</h5>
        <span class="time">2019-03-18 17:30:00</span>
        <p class="content">
          为了优化用户体验，平台将于2019年3月19日凌晨4:30
          --7:00进行系统升级。
          升级期间，平台所有功能将暂停使用。
          升级完成后所有功能将被暂停使用。由此给您带来的不
          便，敬请见谅。
        </p>
      </div>
    </div>
    <div class="sendMessage" :class="{'inpStatus':inpStatus}">
      <input
        type="text"
        @focus="obtainFocus"
        v-model="sendTxt"
        @blur="loseFocue"
        @change="inpData"
        @keydown.enter="sendData"
      >
      <div class="send" v-show="inpStatus" @click="sendData" :class="{'active':sendTxt}">发送</div>
      <img src="../assets/img/faceIcon.png" class="face">
      <img src="../assets/img/imgIcon.png" class="imgIcon">
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";

export default {
  data() {
    return {
      inpStatus: true,
      sendTxt: ""
    };
  },
  methods: {
    obtainFocus() {
      //获取焦点
      setTimeout(() => {
        document.body.scrollTop = 1000;
      }, 300);
      this.inpStatus = true;
    },
    loseFocue() {
      //失去焦点
      // this.inpStatus = false
    },
    sendData() {
      //发送信息

      this.sendTxt = null;
    },
    inpData() {
      //正在输入
    },
    bindToChatInfo() {
      this.$router.push("/chatinfo");
    }
  },
  components: {
    Head
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
#SystemMessage {
  width: 100%;
  height: 100%;
  position: relative;
  #Main {
    position: absolute;
    top: 88px;
    overflow-y: scroll;
    bottom: 100px;
    padding-bottom: 20px;
    width: 100%;
    .timeTag {
      display: block;
      width: 250px;
      height: 40px;
      margin: 20px auto;
      background-color: #e6e9ec;
      font-size: 22px;
      color: #adb0bb;
      text-align: center;
      line-height: 40px;
      border-radius: 20px;
    }
    .messageBox {
      width: 670px;
      padding-left: 21px;
      padding-top: 31px;
      padding-bottom: 49px;
      padding-right: 9px;
      background-color: #ffffff;
      margin: 0 25px;
      border: 1px solid rgba(214, 215, 220, 0.5);
      border-radius: 10px;
      h5 {
        font-size: 32px;
        color: #323232;
      }
      .time {
        display: block;
        font-size: 22px;
        color: #999999;
        margin-top: 17px;
        margin-bottom: 29px;
      }
      .content {
        font-size: 28px;
        color: #323232;
        font-weight: 400;
        line-height: 1.5;
      }
    }
  }
  .sendMessage {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100px;
    background: #fff;
    padding-left: 94px;
    box-sizing: border-box;

    input {
      width: 480px;
      height: 60px;
      background: rgba(237, 237, 237, 1);
      border-radius: 30px;
      margin-right: 40px;
      box-sizing: border-box;
      padding: 0 25px;
      font-size: 24px;
    }

    img {
      width: 42px;
      height: 42px;
    }

    .send {
      position: absolute;
      right: 25px;
      top: 20px;
      width: 90px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background: #ced1d6;
      border-radius: 10px;
      font-size: 24px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #b0b5bc;
    }

    .active {
      background-color: #adb3bd;
      color: rgba(0, 0, 0, 1);
    }

    .face {
      margin-right: 20px;
    }
  }
  .inpStatus {
    input {
      position: absolute;
      top: 50%;
      left: 159px;
      margin-top: -30px;
      width: 441px;
    }

    .face {
      position: absolute;
      top: 50%;
      left: 25px;
      margin-top: -21px;
    }

    .imgIcon {
      position: absolute;
      top: 50%;
      left: 87px;
      margin-top: -21px;
    }
  }
}
</style>
